<template>
    <div style="height:100%;">
        <el-table
            :data="list"
            :border='false'
            :header-cell-style="{background:'#FAFAFA'}"
            height='calc(100% - 52px)'
            style="width: 100%">
            <el-table-column
                label="课件名称"
                >
                <template slot-scope="{row}">
                    {{row.title}}
                </template>
            </el-table-column>
            <el-table-column
                label="学习时长"
                >
                <template slot-scope="{row}">
                    {{row.period>60?parseInt(row.period/60)+'分'+parseInt(row.period%60)+'秒':row.period+'秒' }}
                </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="学习时间">
            </el-table-column>
        </el-table>
        <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="dataList" />
    </div>
</template>

<script>
import{getapplyid,getsubjectTitle}from'@/utils/auth.js'
import {materiallearnlog} from '@/api/admin.js'
import {mapGetters}from'vuex'
import pagination from '@/components/Pagination'
export default {
    props:['titleName'],
    components:{
        pagination
    },
    computed:{
        ...mapGetters(['userinfor','nickname','adminUserId']),
    },
    data() {
        return {
            list:[],
            subject:getsubjectTitle(),
            page:1,
            limit:10,
            total:0,
        }
    },
    methods: {
        dataList(){
            materiallearnlog({applyid:getapplyid(),page:this.page,limit:this.limit}).then(res=>{
                if(res.code==200){
                    console.log(res)
                    this.total = res.data.count
                    this.list =  res.data.list
                }
            })
        },
        load(){
            this.page++
            this.dataList()
        }
    },
    created() {
        this.list=[]
        this.dataList()
    },
}
</script>

<style lang="scss" scoped>
.li{
    padding:0.75rem;
    background: #fff;
    font-size: 1rem;
    border-radius: 0.4rem;
    margin-top: 0.75rem;
    &:first-child{
        margin-top:0;
    }
    .li_item{
        display: flex;
        justify-content: flex-start;
        p{
            margin: 0;
            flex: 3;
        }
        span{
            flex: 2;
            font-weight: 600;
        }
    }
    .li_content{
        line-height: 2rem;
        margin-top: 0.75rem;
        span{
            font-weight: 600;
        }
        i{
            font-size:1rem;
        }
    }
}
.el-pagination{
    padding:0;
}
</style>